<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>

  *{
    font-family: '微软雅黑';
  }
    a{
      text-decoration: none;
      padding: 5px 10px;
      background-color: skyblue;
      color: white;
      border-radius: 5px;
    }
    input{
      border-radius: 5px;
      line-height: 28px;
      font-size: 20px;
      text-indent: 10px;
      outline: none;
      margin: 10px;
      width: 400px;
      border:2px solid #ccc;
      transition: .5s;
    }
    input:focus{
      border:2px solid skyblue;
    }
    textarea.changeInfo{
      width: 100%;
      position: absolute;
      border: none;
      resize: none;
      padding: 5px;
      box-sizing: border-box;
      left:2px;
      outline: none;
      top: 0px;
      height: 150px;
      width: 150px;
      background-color: #fffa9c;
      font-size: 16px;
      display: none;

    }
    textarea:focus{
      color: red;
    }
    ul{
      list-style: none;
      display: flex;
      flex-wrap: wrap;
    }
    .main{
      position: relative;
      margin-left: 50%;
      transform: translateX(-50%);
      background-color: #fafafa;
      width: 100%;
      border-radius: 10px;
    }
    label{
      margin-left: 25%;
    }
    li{
      width: 150px;
      height: 150px;
      background-color: #fffa9c;
      box-shadow: 6px 7px 17px -4px #ccc;
      transition: .4s;
      transform: translateY(0);
      text-align: center;
      margin: 10px;
      display: flex;
      align-items: center;
      padding: 5px;
      box-sizing: border-box;
    }
    span.title{
      align-self: flex-start;
      text-align: center;
      position: absolute;
      width: 100%;
      margin-left: -5px;
      text-align: center;
    }
    a{
      padding:7px 12px;
      font-size: 16px;
      transform: translateY(8px);
      position: absolute;
      /*box-sizing: border-box;*/
    }
    span.del{
      position: absolute;
      color: white;
      background-color: red;
      width: 20px;
      height: 20px;
      line-height: 20px;
      top: -5px;
      right: -10px;
      border-radius: 15px;
      font-size: 18px;
      cursor: pointer;
      display: none;
    }
    span.ok{
      position: absolute;
      color: white;
      background-color: yellowgreen;
      width: 20px;
      height: 20px;
      line-height: 20px;
      top: 25px;
      font-size: 14px;
      right: -10px;
      border-radius: 15px;
      cursor: pointer;
      display: none;
    }
    ul{
      margin-right: 50px; 
    }
    li:hover{
      box-shadow: 3px 3px 17px -4px #ccc;
      transform: translateY(4px);
    }
    span.info {
    height: 119px;
    width: 150px;
    margin-top: 41px;
    font-size: 16px;
    }
    @media screen and (min-width: 1370px){
      html{
        font-size: 32px;
      }
     textarea.changeInfo{
      width: 100%;
      position: absolute;
      border: none;
      resize: none;
      padding: 10px;
      box-sizing: border-box;
      left:4px;
      outline: none;
      top: 0px;
      height: 300px;
      width: 300px;
      background-color: #fffa9c;
      font-size: 32px;
      display: none;
      }
      ul{
      list-style: none;
      display: flex;
      flex-wrap: wrap;
    }
      li{
      width: 300px;
      height: 300px;
      background-color: #fffa9c;
      box-shadow: 6px 7px 17px -4px #ccc;
      transition: .4s;
      transform: translateY(0);
      text-align: center;
      margin: 20px;
      display: flex;
      align-items: center;
      padding: 10px;
      box-sizing: border-box;
    }
    span.info {
    height: 338px;
    width: 300px;
    padding-top: 152px;
    font-size: 32px;
    }
    span.del{
      position: absolute;
      color: white;
      background-color: red;
      width: 40px;
      height: 40px;
      line-height: 40px;
      top: -10px;
      right: -30px;
      border-radius: 30px;
      font-size: 36px;
      cursor: pointer;
      display: none;
    }
    span.ok{
      position: absolute;
      color: white;
      background-color: yellowgreen;
      width: 40px;
      height: 40px;
      line-height: 40px;
      top: 40px;
      font-size: 28px;
      right: -30px;
      border-radius: 30px;
      cursor: pointer;
      display: none;
    }
    }
  </style>
</head>
<body>
    <div class="main"><label>请输入任务：<input type="text"></label><a href="javascript:;" id='submit'>确认</a></div>   
    <ul id="task" class="task">
      <li><span class="title">1</span><span class="info"></span><textarea class="changeInfo"></textarea><span class='del'>╳</span><span class="ok">✓</span></li>
      
    </ul>
</body>
    <script>
        
        setTimeout(()=>{
          localStorage.setItem('task','这是一个示范，按enter或确认添加任务，点击黄纸进行修改');
          console.log(document.getElementsByTagName('li')[0].childNodes);
          document.getElementsByTagName('li')[0].firstChild.nextSibling.innerText = localStorage.getItem('task');
        },200)
              
      var newTask = document.getElementsByTagName('input')[0];
      var submitBtn = document.getElementById('submit');
      var taskList = document.getElementById('task');
      var liList = Array.from(document.getElementsByTagName('li'));
      
      
      var i=1;
      submitBtn.addEventListener('click',()=>{
        addTask()
      })

      //添加任务的函数
      function addTask(){ 
        i++;
        var li = document.createElement('li');
        li.innerHTML =`<span class="title">${i}</span> <span class="info">${newTask.value}</span><textarea class="changeInfo"></textarea><span number='${i}' class='del'>╳</span><span class='ok'>✓</span>`;
          taskList.appendChild(li);

          newTask.value='';
          //存到localStorage中

      }

      //得到输入框中的值，然后添加任务
      var timer;
         newTask.addEventListener('keypress',(e)=>{
         clearTimeout(timer)
          timer=setTimeout(()=>{
          if(e.key=="Enter"){
            addTask()
            }
          },300)
        })
      
      taskList.addEventListener('click',function(e){
        if(e.target.className == 'info'){
          var changeInput = e.target.nextSibling;
          var delBtn = e.target.nextSibling.nextSibling;
          var okBtn = e.target.parentNode.lastChild;
          var originInfo = e.target;
          changeInput.style.display='block';
          delBtn.style.display='block';
          okBtn.style.display='block';
          changeInput.focus();
          changeInput.value=originInfo.innerText;
            delBtn.onclick=(e)=>{
              var num = e.target.getAttribute('number');
              taskList.removeChild(e.target.parentNode);
            }
            okBtn.onclick=()=>{
              originInfo.innerText=changeInput.value;
                 changeInput.style.display='none';
                 delBtn.style.display='none';
                 okBtn.style.display='none'
            }
          changeInput.addEventListener('keypress',(a)=>{
            clearTimeout(timer)
             if(a.key=="Enter"){
                 a.stopPropagation();
                 //改变输入值
                 originInfo.innerText=changeInput.value;
                 changeInput.style.display='none';
                 delBtn.style.display='none';
                 okBtn.style.display='none'
               }
             },300)
        }
      })
     
    </script>
</html>